/*
 * zp verificationCode.js  
 */

;(function($, window, document, undefined) {
	//创建 验证码构造函数
	var VerificationCode = function(ele, option) {
		this.$element = ele,
		//默认设置
		this.defaults = {
			codeWidth: 300,
			codeHeigth: 50,
			codeLength: 5,
			fontSize: 15,
			verifySuccess: function() {},				
			verifyError: function() {}
		},
		//合并设置参数
		this.options = $.extend({}, this.defaults, option)
	};

	//定义验证码内容、背景验证、字体颜色
	var $code_content = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
	var $code_back_color = ['#B4EEB4', '#CDC9A5', '#FAF0E6', '#FFF5EE', "#FFF8DC", '#F2F2F2', '#D9D9D9', '#EEDFCC', '#FFFAF0'];
	var $code_font_color = ['#FF34B3', '#E0FFFF', '#EE82EE', '#FF9900', '#836FFF', '#6C6C6C', '#FF8C00', '#4D4D4D', '#00EE00', '#121212', '#8B2500', '#912CEE', '#FF00FF', '#C67171', '#8B5742', '#668B8B'];

	//定义方法
	VerificationCode.prototype = {
		//初始化
		init: function() {
			var _this = this;

			this.loadDom();
			this.setCode();
			
			//刷新验证码 事件
			this.htmlDoms.code_refresh_image.bind("click", function () {
				_this.refreshCode();
			});
			
			this.htmlDoms.code_data_font.bind("click", function () {
				_this.refreshCode();
			});
			
			//验证输入的验证码是否正确
			this.htmlDoms.code_input.bind("chaneg", function () {
				if (this.value.length == _this.options.codeLength) {
					_this.verifyCode();
				}
			}).bind("keyup", function () {
				if (this.value.length == _this.options.codeLength) {
					_this.verifyCode();
				}
			});
			
		},

		//初始化DOM
		loadDom: function() {
			var _this = this;

			//构建html
			var $codeHtml = '';
			$codeHtml += '<div class="fn_code_container">';
			$codeHtml += '	<div class="fn_code_content">';
			$codeHtml += '		<div class="fn_code_input_container">';
			$codeHtml += '			<input type="text" class="fn_code_input" />';
			$codeHtml += '		</div>';
			$codeHtml += '		<div class="fn_code_data_container">';
			$codeHtml += '			<div class="fn_code_data_font">';
			$codeHtml += '			</div>';
			$codeHtml += '		</div>';
			$codeHtml += '		<div class="fn_refresh_container">';
			$codeHtml += '			<i class = "fn_refresh_img"></i>';
			$codeHtml += '		</div>';
			$codeHtml += '	</div>';
			$codeHtml += '</div>';
			
			this.$element.append($codeHtml);
			
			//查找DOM
			this.htmlDoms = {
				code_container : this.$element.find(".fn_code_container"),
				code_content : this.$element.find(".fn_code_content"),
				code_input_container : this.$element.find(".fn_code_input_container"),
				code_input : this.$element.find(".fn_code_input"),
				code_data_container : this.$element.find(".fn_code_data_container"),
				code_data_font : this.$element.find(".fn_code_data_font"),
				code_refresh_container : this.$element.find(".fn_refresh_container"),
				code_refresh_image : this.$element.find(".fn_refresh_img")
			}
			
			//设置需要的css
			this.htmlDoms.code_container.css({
				"width" : this.options.codeWidth + "px",
				"height" : this.options.codeHeigth + "px",
				"line-height" : this.options.codeHeigth + "px",
				"font-size" : this.options.fontSize + "px !important"
			});
			
			this.htmlDoms.code_data_font.css({
				"margin-top" : (Math.floor(((this.options.codeHeigth - (this.options.codeHeigth * 0.49 + 8)) / 2)) + 4) + "px",
				"line-height" : this.htmlDoms.code_data_font.height() + "px"
			});
			
			this.htmlDoms.code_input.attr("maxlength", this.options.codeLength);
		},
		
		//设置验证码内容
		setCode : function () {
			var _this = this;
			
			//随机获取 验证码 容器背景颜色和验证码字体颜色
			var code_container_back = Math.floor(Math.random() * 8);
			this.htmlDoms.code_data_font.css({
				"background-color" : $code_back_color[code_container_back]
			});
			
			//刷新验证码的时候 清空 输入框的内容
			this.htmlDoms.code_input.val("");
			
			//随机生成 验证码
			this.code_data = '';
			var $code_font_html = '';
			var $code_font_style_italic = "font-style : italic;";
			var $code_font_weight = "font-weight : bolder;";
			for (var i = 0; i < this.options.codeLength; i++) {
				var code_font_data = Math.floor(Math.random() * 61);
				//设置随机字体加粗 或者 倾斜
				var $code_font_style = code_font_data % 3 == 0 ? "font-style : italic; margin-right : 10px;" : "font-weight : bolder;";
				$code_font_style += Math.floor(Math.random() * 2) == 1 ? "font-weight : bolder;" : "";
				//设置随机的字体颜色
				var code_font_color = Math.floor(Math.random() * 15);
				$code_font_style += "color : " + $code_font_color[code_font_color] + ";margin-left : 5px;";
				
				$code_font_html += '<font style = "' + $code_font_style +'">'+ $code_content[code_font_data] +'</font>';
				
				//为验证时使用的 验证码值
				this.code_data += $code_content[code_font_data];
			}
			
			this.htmlDoms.code_data_font.empty().append($code_font_html);
		},
		
		//验证验证码
		verifyCode : function () {
			var $input_val = this.htmlDoms.code_input.val().toLowerCase();
			var $code_data = this.code_data.toLowerCase();
			
			if ($input_val == $code_data) {
				this.options.verifySuccess(this);
			}else {
				this.refreshCode();
				this.options.verifyError(this);
			}
		},
		
		//刷新验证码
		refreshCode : function () {
			this.setCode();
		}
	};

	$.fn.initVerificationCode = function(option) {
		var verificationCode = new VerificationCode(this, option);
		verificationCode.init();
	}

})(jQuery, window, document);